{% extends "new_base.html" %}
{% load static from staticfiles %}
<script src="{%static "js/nguyen.js" %}" type="text/javascript"></script>
{% block css %}
<link rel="stylesheet" type="text/css" media="all" href="{%static "css/base.css" %}" />
<link rel="stylesheet" type="text/css" media="all" href="{%static "jquery-ui-1.10.3/themes/base/jquery-ui.css" %}" />
{% endblock %}
{% block javascriptload %}
<script>
	$('#create').button({
		text : true,
	}).click(function() {
		//open_phone_client_dialog()
	});

	//Creation de l'accordeon
	$(function() {
		$("#accordion").accordion();
	});

	//Création de button
	$(function() {
		$("b,.vider").button().click(function(event) {
			event.preventDefault();
		});
	});

	//Auto completion

	$(function() {
		$("#tags").autocomplete({
			source : "/autocompletion_poudre",
			minLength : 1,
			autoFocus : true,
		});
	});
	////////////////////////////

	function showdetails(exp) {
		//exp = $("#exp")
		chercher(exp)
		$(".toggler_liste_poudres").hide();
		$(".toggler_search").hide();
		$(".toggler_agenda_poudre").hide();
		$(".toggler_create_poudre").hide()

		var selectedEffect = "slide";
		// most effect types need no options passed by default
		var options = {};
		// some effects have required parameters
		if (selectedEffect === "scale") {
			options = {
				percent : 0
			};
		} else if (selectedEffect === "transfer") {
			options = {
				to : "#button",
				className : "ui-effects-transfer"
			};
		} else if (selectedEffect === "size") {
			options = {
				to : {
					width : 200,
					height : 60
				}
			};
		}
		// run the effect
		$(".toggler_agenda_poudre").effect(selectedEffect, options, 500);
	}

	function chercher(e) {
		var lien = "/search_poudre?term=" + e.replace(/ /g, '_')
		$.getJSON(lien, function(data) {
			//$("#user_list").empty();
			$("#tab_agenda").empty()
			html = "<tr" + " class =row" + row + ">" + "<th>" + "Xuất/Nhâp" + "</th>" + "<th>" + "Ngày Tháng" + "</th>" + "<th>" + "Số lượng" + "</th>" + "<th>" + "Giá thành" + "</th>" + "<th>" + "Thành giá" + "</th>" + "<th>" + "Kho" + "</th>" + "</tr>";
			for (var i = 0; i < data.length; i++) {
				var row = (i % 2)
				html += "<tr" + " class =row" + row + ">" + "<th>" + data[i][0] + "</th>" + "<th>" + data[i][1] + "</th>" + "<th>" + data[i][2] + "</th>" + "<th>" + data[i][3] + "<th>" + data[i][4] + "</th>" + "<th>" + data[i][5] + "</th>" + "</tr>"

			}
			$("#poudre").empty()
			$("#poudre").append(e)
			$("#tab_agenda").append(html)
		});
	}

	////////////////////////////////////////////////////////
	$(function() {
		function hideall() {
			$(".toggler_liste_poudres").hide();
			$(".toggler_search").hide();
			$(".toggler_agenda_poudre").hide();
			$(".toggler_create_poudre").hide()
		}

		// run the currently selected effect
		function runEffect(cequilfaut) {
			// get effect type from
			var selectedEffect = "slide";
			// most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if (selectedEffect === "scale") {
				options = {
					percent : 0
				};
			} else if (selectedEffect === "transfer") {
				options = {
					to : "#button",
					className : "ui-effects-transfer"
				};
			} else if (selectedEffect === "size") {
				options = {
					to : {
						width : 200,
						height : 60
					}
				};
			}
			// run the effect
			$(cequilfaut).effect(selectedEffect, options, 500);
		};

		$("#liste_button").click(function(e) {
			hideall()
			e.preventDefault()
			runEffect(".toggler_liste_poudres");
			return false;
		});
		$("#button").click(function(e) {
			exp = $("#tags").val()
			$("#tags").empty()
			chercher(exp)
			hideall()
			e.preventDefault()
			runEffect(".toggler_agenda_poudre")
			return false;
		});
		$("#search_button").click(function(e) {
			//chercher()
			hideall()
			e.preventDefault()
			runEffect(".toggler_search");
			$("#tags").empty()
			return false;
		});

		$("#b_create").click(function(e) {
			//chercher()
			hideall()
			e.preventDefault()
			runEffect(".toggler_create_poudre");
			return false;
		});
		/*$("#details").click(
		 function showdetails(exp) {
		 //exp = $("#exp")
		 chercher(exp)
		 hideall()
		 e.preventDefault()
		 runEffect(".toggler_agenda_poudre");
		 return false;
		 }//);*/

		$(".toggler_liste_poudres").hide();
		$(".toggler_search").hide();
		$(".toggler_agenda_poudre").hide();
		$(".toggler_create_poudre").hide()
	});
	// set effect from select menu value

</script>
<script>
	$(function() {
		$("#menu").menu();
	}); 
</script>
<style>
	.ui-menu {
	}
</style>
<script>
	$(function() {
		$("#datepicker").datepicker();
	}); 
</script>
{% endblock %}

{% block menu %}
<h3>Quản lí bột</h3>
<div class="wrapper p2">
	<div class="extra-wrap">
		<ul id="menu">
			<li>
				<a id ="liste_button">Liste bột đã nhập</a>
			</li>
			<li>
				<a id ="search_button">Tìm bột</a>
			</li>
		</ul>
	</div>
</div>
<a class="button" id="b_create">Tạo bột mới</a>
<!--img src="{% static "bouton/addP.png" %}" id="create" /-->
{% endblock %}


{% block content %}
<!--div id="accordion"-->

<div class="toggler_liste_poudres">
	<div id="effect">
		<h4>
		<cufon class="cufon cufon-canvas" alt="Our " style="width: 45px; height: 28px;">
			<cufon class="cufon cufon-canvas" alt="Capabilities" style="width: 111px; height: 28px;">
				<canvas width="136" height="37" style="width: 136px; height: 37px; top: -1px; left: -6px;"></canvas>
				<cufontext>
					Liste bột đã nhập: 
				</cufontext>
			</cufon>
		</h4>
		<p id="contenu_du_toggler">
			{% if latest_list %}<ol>
				{% for p in latest_list %} 
					<li id="details"><a href="javascript: showdetails('{{p.nom}}')">{{ p.nom}}</a>
					</li>
				{% endfor %}</ol>
			{% else %}
				<p>No polls are available.</p>
			{% endif %}
			<table style="width: 100%; padding: 5px;"  class="tabcenter">
				<thead class="ui-widget-header" id="tab_agenda">
				</thead>
				<tbody>
			</table>
		</p>
	</div>
</div>
<div class="toggler_search">
	<div id="effect">
		
		<h4>
		<cufon class="cufon cufon-canvas" alt="Our " style="width: 45px; height: 28px;">
			<cufon class="cufon cufon-canvas" alt="Capabilities" style="width: 111px; height: 28px;">
				<canvas width="136" height="37" style="width: 136px; height: 37px; top: -1px; left: -6px;"></canvas>
				<cufontext>
					Tìm kiếm bột: 
				</cufontext>
			</cufon>
		</h4>
		<p id="contenu_du_toggler">
			<div style="text-align: center;">
			<div class="ui-widget">
				
				<label for="tags"><h1>Nhập tên bột: </h1></label>
				<input id="tags"/>
				<a id="button" class="button" href="#">Tìm</a>
			</div>
			</div>
		</p>
	</div>
</div>

<div class="toggler_agenda_poudre">
	<div id="effect" >
		<h4 id="poudre"></h4>
		<p id="contenu_du_toggler">
			<table style="width: 100%; padding: 5px;"  class="tabcenter">
				<thead class="ui-widget-header" id="tab_agenda"></thead>
				<tbody>
			</table>
		</p>
	</div>
</div>
<div class="toggler_create_poudre">
	<div id="effect" >
		
		
		<h4>
		<cufon class="cufon cufon-canvas" alt="Our " style="width: 45px; height: 28px;">
			<cufon class="cufon cufon-canvas" alt="Capabilities" style="width: 111px; height: 28px;">
				<canvas width="136" height="37" style="width: 136px; height: 37px; top: -1px; left: -6px;"></canvas>
				<cufontext>
					Tao Bot Moi: 
				</cufontext>
			</cufon>
		</h4>
		
								<form id="contact-form" method="post">					
									<fieldset>
										<div class="wrapper">
											<label class="img-indent2"><span class="text-form">Name:</span><input name="p1" type="text" id="nomP"/></label>
											<label class="fleft"><span class="text-form">Phone:</span><input name="p1" type="text" /></label>
										</div>
										<div class="wrapper">
											<label class="img-indent2"><span class="text-form">Address:</span><input name="p1" type="text" /></label>
											<label class="fleft"><span class="text-form">E-mail:</span><input name="p2" type="text" /></label> 
										</div>							 
										<div class="wrapper">
										  <div class="text-form">Contacts:</div>
										  <div class="extra-wrap">
											  <label class="message"><textarea></textarea></label>
											  <div class="buttons">
												  <a class="button2" href="#" onClick="document.getElementById('contact-form').reset()">Clear</a>
												  <a class="button2" href="#" onClick="document.getElementById('contact-form').submit()">Send</a>
											  </div> 
										  </div>
										</div>							
									</fieldset>						
								</form>
		
		
		
		
		<h3 >Tạo bột mới :</h3>
		<p id="contenu_du_toggler">
			<form action="/poudres/create" method="post">
				<div>
					<label for="nom">Tên bột :</label>
					<input type="text" id="nom" />
					<label for="codeP">Mã bột :</label>
					<input type="code" id="codeP" />
				</div>
				<div>
					<label for="dateP">Ngày tạo :</label>
					<input type="text" id="datepicker" />
					<div class="button">
						<button type="submit"> Tạo bột</button>
					</div>
				</div>
			</form>
		</p>
	</div>
</div>
{% endblock %}